<!-- 树形控件，用来选择代码 -->
<template>
  <div class="code-tree p-8">
    <a-tree
      class="my-ant-tree"
      :tree-data="treeData"
      :field-names="{ children: 'childList', title: 'name', key: 'path' }"
      :selected-keys="defaultNode"
      @select="handleSelect"
    />
  </div>
</template>

<script lang="ts" setup>
  import type { TreeProps } from 'ant-design-vue'
  import { ref } from 'vue'

  export interface Props {
    treeData: TreeProps['treeData']
    defaultPath?: string
  }
  const props = withDefaults(defineProps<Props>(), {
    treeData: () => [],
    defaultPath: ''
  })
  const emits = defineEmits<{ (e: 'onSelect', params: string[], event?: any): void }>()
  const defaultNode = ref<string[]>([props.defaultPath])
  const handleSelect = (key: any[], event?: any) => {
    defaultNode.value = key
    emits('onSelect', key, event)
  }
</script>
